<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      historyData: {
        title: '姿势提升',
        length: 100,
        image: [
          'https://i.postimg.cc/GphckZJB/1.png',
          '12月19日 13:32',
          '进阶跑者',
        ],
      },
      data2: '',
    };
  },

  methods: {},
};
</script>
<template>
  <view class="flex-col page">
    <view class="flex-row justify-between section">
      <view class="flex-col self-start group_3">
        <text class="text">时光机</text>
        <text class="text_2 mt-5">Timer Shaft</text>
      </view>
      <view class="flex-col justify-start items-end relative group">
        <view class="group_2"></view>
        <view class="flex-col justify-start items-start image-wrapper pos">
          <image class="image" src="https://i.postimg.cc/TYDPd0F5/f9d0e2f8cb5db2e91bb7610ef2ccafea.png" />
        </view>
        <view class="flex-col justify-start items-center image-wrapper_2 pos_3">
          <image class="image_3" src="https://i.postimg.cc/YqGxpctN/a17c6e3cd5430d8e620769af05618f87.png" />
        </view>
        <view class="section_2 pos_4"></view>
        <image class="image_2 pos_2" src="https://i.postimg.cc/kGRpS2Pw/26be6ad0fa8fcb2686cccb0618442bf0.png" />
      </view>
    </view>
    <scroll-view class="mt-26" :scroll-y="true">
      <view class="flex-row justify-between items-center section_3" v-for="item in historyData" :key="item.id">
        <view class="flex-row items-center">
          <image class="shrink-0 image_4" :src="historyData.image[0]" />
          <view class="flex-col shrink-0 group_4 ml-17">
            <text class="self-start text_3">{{ historyData.title }}</text>
            <text class="mt-12 self-stretch font text_5">{{ historyData.image[1] }}</text>
          </view>
        </view>
        <view class="flex-col items-center">
          <text class="text_4">{{ historyData.image[2] }}</text>
          <view class="mt-10 flex-col justify-start items-center text-wrapper">
            <text class="font text_6">{{ historyData.length }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<style lang="scss">
html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 3.49rpx;
}

.mt-2 {
  margin-top: 3.49rpx;
}

.ml-4 {
  margin-left: 6.98rpx;
}

.mt-4 {
  margin-top: 6.98rpx;
}

.ml-6 {
  margin-left: 10.47rpx;
}

.mt-6 {
  margin-top: 10.47rpx;
}

.ml-8 {
  margin-left: 13.95rpx;
}

.mt-8 {
  margin-top: 13.95rpx;
}

.ml-10 {
  margin-left: 17.44rpx;
}

.mt-10 {
  margin-top: 17.44rpx;
}

.ml-12 {
  margin-left: 20.93rpx;
}

.mt-12 {
  margin-top: 20.93rpx;
}

.ml-14 {
  margin-left: 24.42rpx;
}

.mt-14 {
  margin-top: 24.42rpx;
}

.ml-16 {
  margin-left: 27.91rpx;
}

.mt-16 {
  margin-top: 27.91rpx;
}

.ml-18 {
  margin-left: 31.4rpx;
}

.mt-18 {
  margin-top: 31.4rpx;
}

.ml-20 {
  margin-left: 34.88rpx;
}

.mt-20 {
  margin-top: 34.88rpx;
}

.ml-22 {
  margin-left: 38.37rpx;
}

.mt-22 {
  margin-top: 38.37rpx;
}

.ml-24 {
  margin-left: 41.86rpx;
}

.mt-24 {
  margin-top: 41.86rpx;
}

.ml-26 {
  margin-left: 45.35rpx;
}

.mt-26 {
  margin-top: 45.35rpx;
}

.ml-28 {
  margin-left: 48.84rpx;
}

.mt-28 {
  margin-top: 48.84rpx;
}

.ml-30 {
  margin-left: 52.33rpx;
}

.mt-30 {
  margin-top: 52.33rpx;
}

.ml-32 {
  margin-left: 55.81rpx;
}

.mt-32 {
  margin-top: 55.81rpx;
}

.ml-34 {
  margin-left: 59.3rpx;
}

.mt-34 {
  margin-top: 59.3rpx;
}

.ml-36 {
  margin-left: 62.79rpx;
}

.mt-36 {
  margin-top: 62.79rpx;
}

.ml-38 {
  margin-left: 66.28rpx;
}

.mt-38 {
  margin-top: 66.28rpx;
}

.ml-40 {
  margin-left: 69.77rpx;
}

.mt-40 {
  margin-top: 69.77rpx;
}

.ml-42 {
  margin-left: 73.26rpx;
}

.mt-42 {
  margin-top: 73.26rpx;
}

.ml-44 {
  margin-left: 76.74rpx;
}

.mt-44 {
  margin-top: 76.74rpx;
}

.ml-46 {
  margin-left: 80.23rpx;
}

.mt-46 {
  margin-top: 80.23rpx;
}

.ml-48 {
  margin-left: 83.72rpx;
}

.mt-48 {
  margin-top: 83.72rpx;
}

.ml-50 {
  margin-left: 87.21rpx;
}

.mt-50 {
  margin-top: 87.21rpx;
}

.ml-52 {
  margin-left: 90.7rpx;
}

.mt-52 {
  margin-top: 90.7rpx;
}

.ml-54 {
  margin-left: 94.19rpx;
}

.mt-54 {
  margin-top: 94.19rpx;
}

.ml-56 {
  margin-left: 97.67rpx;
}

.mt-56 {
  margin-top: 97.67rpx;
}

.ml-58 {
  margin-left: 101.16rpx;
}

.mt-58 {
  margin-top: 101.16rpx;
}

.ml-60 {
  margin-left: 104.65rpx;
}

.mt-60 {
  margin-top: 104.65rpx;
}

.ml-62 {
  margin-left: 108.14rpx;
}

.mt-62 {
  margin-top: 108.14rpx;
}

.ml-64 {
  margin-left: 111.63rpx;
}

.mt-64 {
  margin-top: 111.63rpx;
}

.ml-66 {
  margin-left: 115.12rpx;
}

.mt-66 {
  margin-top: 115.12rpx;
}

.ml-68 {
  margin-left: 118.6rpx;
}

.mt-68 {
  margin-top: 118.6rpx;
}

.ml-70 {
  margin-left: 122.09rpx;
}

.mt-70 {
  margin-top: 122.09rpx;
}

.ml-72 {
  margin-left: 125.58rpx;
}

.mt-72 {
  margin-top: 125.58rpx;
}

.ml-74 {
  margin-left: 129.07rpx;
}

.mt-74 {
  margin-top: 129.07rpx;
}

.ml-76 {
  margin-left: 132.56rpx;
}

.mt-76 {
  margin-top: 132.56rpx;
}

.ml-78 {
  margin-left: 136.05rpx;
}

.mt-78 {
  margin-top: 136.05rpx;
}

.ml-80 {
  margin-left: 139.53rpx;
}

.mt-80 {
  margin-top: 139.53rpx;
}

.ml-82 {
  margin-left: 143.02rpx;
}

.mt-82 {
  margin-top: 143.02rpx;
}

.ml-84 {
  margin-left: 146.51rpx;
}

.mt-84 {
  margin-top: 146.51rpx;
}

.ml-86 {
  margin-left: 150rpx;
}

.mt-86 {
  margin-top: 150rpx;
}

.ml-88 {
  margin-left: 153.49rpx;
}

.mt-88 {
  margin-top: 153.49rpx;
}

.ml-90 {
  margin-left: 156.98rpx;
}

.mt-90 {
  margin-top: 156.98rpx;
}

.ml-92 {
  margin-left: 160.47rpx;
}

.mt-92 {
  margin-top: 160.47rpx;
}

.ml-94 {
  margin-left: 163.95rpx;
}

.mt-94 {
  margin-top: 163.95rpx;
}

.ml-96 {
  margin-left: 167.44rpx;
}

.mt-96 {
  margin-top: 167.44rpx;
}

.ml-98 {
  margin-left: 170.93rpx;
}

.mt-98 {
  margin-top: 170.93rpx;
}

.ml-100 {
  margin-left: 174.42rpx;
}

.mt-100 {
  margin-top: 174.42rpx;
}

.mt-5 {
  margin-top: 8.72rpx;
}

.ml-17 {
  margin-left: 29.65rpx;
}

.page {
  padding-bottom: 987.21rpx;
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section {
    padding: 71.51rpx 37.2rpx 0;
    background-image: linear-gradient(90deg, #4fb0fe 0%, #2b9bf6 100%);

    .group_3 {
      margin-top: 111.07rpx;
      width: 130.81rpx;

      .text {
        margin-left: 2.81rpx;
        color: #ffffff;
        font-size: 41.86rpx;
        font-family: PingFangSC;
        font-weight: 600;
        line-height: 38.51rpx;
        text-shadow: 0rpx 1.74rpx 6.98rpx #0b7ecf;
      }

      .text_2 {
        color: #ffffffa6;
        font-size: 24.42rpx;
        font-family: PingFangSC;
        line-height: 29.65rpx;
      }
    }

    .group {
      margin-right: 9.8rpx;
      padding-bottom: 62.2rpx;
      width: 376.74rpx;

      .group_2 {
        margin-right: 34.81rpx;
        width: 262.78rpx;
        height: 284.9rpx;
        border-left: solid 1.74rpx #ffffff1a;
        border-right: solid 1.74rpx #ffffff1a;
        border-top: solid 1.74rpx #ffffff1a;
        border-bottom: solid 1.74rpx #ffffff1a;
      }

      .image-wrapper {
        padding: 21.3rpx 0 48.56rpx;
        background-image: linear-gradient(180deg, #70bcfb 0%, #2e9df7 100%);
        border-radius: 17.44rpx;
        width: 218.46rpx;

        .image {
          margin-left: 23.76rpx;
          width: 85.47rpx;
          height: 88.95rpx;
        }
      }

      .pos {
        position: absolute;
        right: 0;
        top: 65.48rpx;
      }

      .image-wrapper_2 {
        padding: 26.2rpx 0 92.49rpx;
        background-image: linear-gradient(180deg, #59b2fa 0%, #56b1fa 100%);
        border-radius: 17.44rpx;
        width: 131.39rpx;

        .image_3 {
          width: 38.37rpx;
          height: 40.12rpx;
        }
      }

      .pos_3 {
        position: absolute;
        left: 0;
        top: 158.81rpx;
      }

      .section_2 {
        background-image: linear-gradient(180deg, #74bffb 0%, #34a0f8 100%);
        border-radius: 17.44rpx;
        width: 121.88rpx;
        height: 145.73rpx;
      }

      .pos_4 {
        position: absolute;
        left: 115.57rpx;
        top: 201.37rpx;
      }

      .image_2 {
        width: 90.7rpx;
        height: 94.19rpx;
      }

      .pos_2 {
        position: absolute;
        right: 16.94rpx;
        bottom: 110.46rpx;
      }
    }
  }

  .section_3 {
    padding: 45.35rpx 27.89rpx 45.35rpx 27.91rpx;
    background-color: #ffffff;
    border-radius: 17.44rpx;
    filter: drop-shadow(0rpx 0rpx 13.95rpx #84b3f514);

    .image_4 {
      border-radius: 6.98rpx;
      width: 83.72rpx;
      height: 83.72rpx;
    }

    .group_4 {
      width: 144.16rpx;

      .text_3 {
        color: #000000;
        font-size: 26.16rpx;
        font-family: SourceHanSansCN;
        line-height: 24.07rpx;
      }

      .text_5 {
        color: #98a1af;
        line-height: 27.91rpx;
        text-align: right;
      }
    }

    .text_4 {
      color: #000000;
      font-size: 31.4rpx;
      font-family: Helvetica;
      line-height: 22.94rpx;
    }

    .text-wrapper {
      padding: 8.79rpx 0 6.56rpx;
      background-color: #eafee0;
      overflow: hidden;
      width: 62.79rpx;

      .text_6 {
        color: #52c41a;
        line-height: 19.53rpx;
      }
    }

    .font {
      font-size: 20.93rpx;
      font-family: SourceHanSansCN;
    }
  }
}
</style>
